<template>
<div class="img_main">
  <h3 :class="index==0?'yellow':index==1?'orange':'blue'">{{data.amount}}</h3>
  <img :src="require('@/assets/images/'+data.img)" alt="">
  <p>{{data.title}}</p>
</div>
</template>

<script>
export default {
name: "imgMiddle",
  props:{
  data:{
    type:Object,
    default(){
      return {}
    }
  },
    index:{
    type:Number,
      default(){
      return 0
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.img_main{
  h3{
    font-size:1.4rem;
    &.orange{
      color:#FD5365;
    };
    &.blue{
      color:#00D2EF;
    }
    &.yellow{
      color:#FCDF51;
    }
  }
  p{
    color:#BFD9FF;
  }
  img{
    width:6.1rem;
    margin:.8rem 0;
  }
}
</style>
